<template>
  <table class="kw-table" :class="`kw-table-${border?'border':''}`">
      <thead>
        <tr class="kw-table-tr">
            <th class="kw-table-th" :class="item.cls" 
                :style="`width: ${item.width};min-width:${item.minWidth}px`" 
                v-for="(item, i) in columns" :key="i">
                {{item.title}}
            </th>
        </tr>
      </thead>
      <tbody>
          <tr class="kw-table-tr" v-for="(item, i) in data" :key="i">
              <td class="kw-table-td" :class="item.cls" v-for="(column, j) in columns" :key="j">
                  <kw-table-column :row="item" :column="column" :index="i"></kw-table-column>
              </td>
          </tr>
      </tbody>
  </table>
</template>

<script>
import KwTableColumn from './KwTableColumn'
export default {
    components: {KwTableColumn},
    props: {
        columns: {
            type: Array,
            required: true,
            default: () => {
                return []
            }
        },
        data: {
            type: Array,
            default: () => {
                return []
            }
        },
        border: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="less">
.kw-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    td, th {
        min-width: 0;
        height: 48px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        vertical-align: middle;
        border-bottom: 1px solid #e8eaec;
    }
    th {
        padding-left: 18px;
        padding-right: 18px;
    }
    tbody {
        tr {
            transition: background-color .2s ease-in-out;
            &:hover {
                background-color: #ebf7ff;
            }
        }
    }
    .kw-table-cell {
        padding-left: 8px;
        padding-right: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        box-sizing: border-box;
    }
    select {
        border: none !important;
    }
    &.kw-table-border {
        border: 1px solid #dcdee2;
        border-bottom: 0;
        border-right: 0;
        td, th {
        border-right: 1px solid #e8eaec;
    }
    }
}
</style>